<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>网上餐厅</title>
    <link rel="icon" href="../../front/images/favico.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../front/plugins/element-ui/index.css"/>
    <!--引入vant样式-->
    <link rel="stylesheet" href="../styles/vant.min.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../styles/index.css"/>
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="./../styles/user-edit.css"/>
</head>
<body>
<div id="user-edit" class="app">
    <div class="divHead">
        <div class="divTitle">
            <i class="el-icon-arrow-left" @click="goBack"></i>{{title}}
        </div>
    </div>
    <div class="divContent">
        <div class="divItem">
            <span>用户名：</span>
            <el-input placeholder=" 修改姓名" v-model="form.name" maxlength='10' class="inputUser"></el-input>
            <el-upload
                    class="avatar-uploader"
                    action="/common/upload/avatar"
                    accept="image/*"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :on-change="onChange"
                    ref="upload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        <div class="divItem">
            <span>性别：</span>
            <span class="spanChecked" @click="form.sex = '1'">
                <i :class="{iActive:form.sex === '1'}"></i>
                先生
            </span>
            &nbsp;
            <span class="spanChecked" @click="form.sex = '0'">
                <i :class="{iActive:form.sex === '0'}"></i>
                女士
            </span>
        </div>
        <div class="divItem">
            <span>手机号码：</span>
            <el-input placeholder="修改手机号码"
                      v-model="form.phone" maxlength='20'
                      style="width: calc(100% - 80rem);"
                      :disabled="true"></el-input>
        </div>
        <div class="divItem">
            <span>身份证号码：</span>
            <el-input v-model="form.idNumber" placeholder="请输入身份证号" maxlength="30"></el-input>
        </div>
        <div class="divSave" @click="saveUser">保存修改</div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../front/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../front/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<script src="./../api/address.js"></script>
<!-- 引入axios -->
<script src="../../front/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../js/common.js"></script>
<script src="./../api/main.js"></script>
<script src="./../api/user.js"></script>
</body>
<script>
    new Vue({
        el: "#user-edit",
        data() {
            return {
                title: '修改个人信息',
                form: {
                    name: '',
                    phone: undefined,//手机号
                    sex: '1',//0表示女 1 表示男
                    idNumber: '',
                    avatar: '',
                },
                imageUrl: '',
            }
        },
        computed: {},
        created() {
            this.initData();
        },
        mounted() {
        },
        methods: {
            goBack() {
                history.go(-1)
                // window.location.replace('/front/page/address.html')
                // window.requestAnimationFrame(()=>{
                //     window.location.replace('/front/page/user.html')
                // })
            },
            initData(){
                this.getUser();
                // this.getLatestOrder()
            },
            async getUser(){
                // console.log(this.form.phone);
                let uid = sessionStorage.getItem("userId");
                // 1 通过手机号查询查询用户数据；
                const res = await userFindOneApi(uid);

                console.log(res.data);
                // 2 回显
                if(res.code === 20041){
                    this.form = res.data;
                    // this.form.phone = res.data.phone;
                    this.form.sex = res.data.sex!=null ? res.data.sex : '1';
                    this.imageUrl = `/common/download/avatar?name=${res.data.avatar}`
                    console.log(this.form)
                }else {
                    this.$notify({ type:'warning', message:res.msg});
                }
            },
            async saveUser() {
                const form = this.form;
                console.log(form);
                if(!form.name){
                    this.$notify({ type:'warning', message:'请输入用户名'});
                    return
                }
                if (!form.sex) {
                    this.$notify({type: 'warning', message: '请填写性别'});
                    return
                }
                if (!form.idNumber) {
                    this.$notify({type: 'warning', message: '请输入身份证号码'});
                    return
                }
                const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                if (!reg.test(form.idNumber)) {
                    this.$notify({type: 'warning', message: '身份证号码不合法'});
                    return
                }
                let res = {};
                res = await updateUserApi(this.form);
                if(res.code === 20031){
                    window.requestAnimationFrame(()=>{
                        window.location.replace('/front/page/user.html')
                    })
                }else{
                    this.$notify({ type:'warning', message:res.msg});
                }
            },
            handleAvatarSuccess (response, file, fileList) {
                // console.log("response.code:"+response.code)
                // console.log("response.msg:"+response.msg)
                // 拼接down接口预览
                if(response.code === 10000 && response.msg === '前端用户未登录'){
                    window.top.location.href = '/frond/page/login.html'
                }else if (response.code === 30001){
                    this.imageUrl = `/common/download/avatar?name=${response.data}`
                    this.form.avatar = response.data
                } else{
                    this.$notify({ type:'warning', message:response.msg || '操作失败'});
                }
            },
            onChange (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
        }
    })
</script>
</html>